<template>
  <div class="pagination" @click="handleCurrentChange">
    <div class="pagination__div">共 {{ total }} 条</div>
    <button
      :disabled="myCurrentPage === 1"
      :data-next="-1"
      class="iconfont icon-arrow-left-bold pagination__btn--left"
    ></button>
    <ul class="Pagination__pages">
      <li :data-page="1" :class="{ active: myCurrentPage === 1 }">1</li>
      <li
        v-show="allPage > 7 && myCurrentPage > 4"
        class="iconfont icon-elipsis"
        :data-next="-5"
      ></li>
      <li
        v-for="num in startAnd.aaa"
        :key="startAnd.start + num - 1"
        :class="{ active: myCurrentPage === startAnd.start + num - 1 }"
        :data-page="startAnd.start + num - 1"
      >
        {{ startAnd.start + num - 1 }}
      </li>
      <li
        v-show="allPage > 7 && allPage - myCurrentPage > 3"
        class="iconfont icon-elipsis"
        :data-next="5"
      ></li>
      <li
        :class="{ active: myCurrentPage === allPage }"
        v-if="startAnd.end === 0 ? false : true"
        :data-page="allPage"
      >
        {{ Math.ceil(total / MyPageSize) }}
      </li>
    </ul>
    <button
      :data-next="1"
      :disabled="myCurrentPage >= allPage"
      class="iconfont icon-arrow-right-bold pagination__btn--right"
    ></button>
    <select class="pagination__select" @change="handleSizeChange">
      <option
        :value="pageSize"
        v-for="(pageSize, index) in pageSizes"
        :key="index"
      >
        每页 {{ pageSize }} 条
      </option>
    </select>
    <div class="pagination__div">
      前往<input
        class="pagination__input"
        @keyup.enter="changeCurrentPage"
        :value="myCurrentPage"
        type="text"
      />页
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "pagination",
};
</script>

<script lang="ts" setup>
import { ref, computed, watch } from "vue";

const props = withDefaults(
  defineProps<{
    currentPage?: number;
    pageSizes?: Array<any>;
    pageSize?: number;
    total?: number;
  }>(),
  {
    currentPage: 1,
    pageSizes: () => [10, 20, 30],
    pageSize: 5,
    total: 1,
  }
);
const myCurrentPage = ref(props.currentPage);
const MyPageSize = ref(props.pageSize);
const allPage = computed(() => {
  return Math.ceil(props.total / MyPageSize.value);
});
const startAnd = computed(() => {
  let start = myCurrentPage.value - 2;
  let end = start + 4;
  if (allPage.value <= 2) {
    start = 0;
    end = allPage.value - 1; //0||1
    return { start, end, aaa: 0 };
  }
  //情况1：2<x<=7
  if (allPage.value <= 7) {
    (start = 2), (end = allPage.value - 1);
    return { start, end, aaa: end - start + 1 };
  }
  //情况2：x>7  y-1<=2
  if (myCurrentPage.value < 4) {
    start = 2;
    end = start + 4;
  }
  //情况3：x>7  x-y<=2
  if (allPage.value - myCurrentPage.value <= 2) {
    end = allPage.value - 1;
    start = end - 4;
  }
  return { start, end, aaa: end - start + 1 };
});

const handleSizeChange = (event: any) => {
  MyPageSize.value = Number(event.target.value);
  if (myCurrentPage.value > allPage.value) {
    myCurrentPage.value = allPage.value;
  }
};

const handleCurrentChange = (event: any) => {
  const next = Number(event.target.dataset.next);
  if (next) {
    const newPageNo = myCurrentPage.value + next;
    myCurrentPage.value = newPageNo > allPage.value ? allPage.value : newPageNo;
    myCurrentPage.value = newPageNo < 1 ? 1 : newPageNo;
  } else if (event.target.dataset.page) {
    myCurrentPage.value = Number(event.target.dataset.page);
  }
};
const changeCurrentPage = (event: any) => {
  myCurrentPage.value = Number(event.target.value);
};
const emit = defineEmits(["current-change", "size-change"]);

watch(myCurrentPage, () => {
  emit("current-change", myCurrentPage.value);
});
watch(MyPageSize, () => {
  emit("size-change", MyPageSize.value);
});
</script>

<style scoped lang="less">
.pagination {
  display: flex;
  justify-content: center;
  text-align: center;
  line-height: 30px;
}
.pagination__btn--right,
.pagination__btn--left {
  border: none;
  &:disabled {
    color: #c0c4cc;
    cursor: not-allowed;
  }
}
.Pagination__pages {
  display: flex;
  justify-content: center;
}
.pagination__btn--left,
.pagination__btn--right,
.Pagination__pages li {
  width: 30px;
  height: 30px;
  background-color: #eaeaea;
  color: #fff;
  margin: 0 5px;
  border-radius: 3px;
  cursor: pointer;
}
.pagination__select {
  outline: none;
  margin: 0 0 0 20px;
}
.pagination__select option {
  height: 30px;
}
.pagination li.active {
  background-color: rgba(5, 128, 250, 0.959);
}
.pagination__div {
  margin: 0 20px;
  font-size: 14px;
}
.pagination__input {
  width: 50px;
  height: 30px;
  font-size: 16px;
  text-align: center;
  margin: 0 5px;
  border-radius: 3px;
  outline: none;
  border: 1px solid #eee;
}
</style>
